<style lang="scss" scoped>
  .search-input {
    .search_input {
      position: relative;
      input {
        width: 100%;
        background: #e9e9e9;
        text-align: center;
        padding: 1vw 2vw;
        border-radius: 1vw;
      }
      .button_size {
        height: 7.5vw;
        width: 23vw !important;
      }
      .icon_search {
        color: #aaa;
      }
      .icon_plus {
        right: 29vw;
      }
    }
  }
</style>

<template lang="pug">
  .search-input
    .search_input.container_min
      input(:placeholder="place" @focus="$emit('update:show',true)" @input="changeVal" :value='val' ref="input")
      icon.icon_search(icon="search" :style="right")
      icon.icon_plus.rotate45(icon="plus" @click="changeVal('')" v-if="show")
      mu-button.button_size(color="info" @click="search" v-if="show") 搜索
</template>

<script>
  import {mapState, mapGetters, mapMutations} from 'vuex'
  export default {
    name: "search-input",
    props: ['place', 'show', 'val', 'storageShow', 'loading'],
    model: {
      prop: 'val',//prop说:我要将value1作为该组件被使用(被父组件调用)时,v-model能取到的值
      event: 'input'// event说:我emit(触发)input，参数的值就是父组件v-model收到的值。
    },
    data() {
      return {}
    },
    computed: {
      ...mapState([]),
      ...mapGetters([]),
      right() {
        let num;
        const arr = this.isChineseChar(this.place);
        if(arr === null){
          num = this.place.length
        }else {
          let len = arr.length
          num = len * 2 + this.place.length - len ;
        }
        return this.show ? {left: '4vw'} : {right: num + 50 +'vw'};
      }
    },
    methods: {
      ...mapMutations([]),
      isChineseChar(str){
        var reg = /[\u4E00-\u9FA5\uF900-\uFA2D]/g;
        return str.match(reg);
      },
      changeVal (e){
        let str;
        if(typeof e === 'object'){
          str = e.target.value;
        } else {
          str = e;
          this.$refs.input.focus();
        }
        if(!str) this.$emit('update:loading', false)
        this.$emit('input', str);
        this.$emit('update:storageShow', str.length ? false : true)
      },
      search() {
        if(!this.val) return;
        this.$emit('update:loading', true)
        this.$emit('search')
      }
    },
    created() {

    },
    mounted() {

    }
  }
</script>

